<!--
 * @Author: 王鹏 2911783749@qq.com
 * @Date: 2022-10-21 14:24:43
 * @LastEditors: 王鹏 2911783749@qq.com
 * @LastEditTime: 2022-10-24 14:27:14
 * @FilePath: \v_shop\code\src\views\Dialog.vue
 * @Description: 用户列表弹窗组件
-->
<template>
  <div>
    <!-- 模态框 -->
    <el-dialog :title="dialog.title" :visible.sync="dialog.show">
      <!-- 分配角色模态框表单 -->
      <el-form
        :model="usersForm"
        :rules="userFormRules"
        ref="usersFormRef"
        v-if="dialog.option == 'set_role'"
      >
        <p>当前的用户:{{ userInfo.username }}</p>
        <p>当前的角色:{{ userInfo.role_name }}</p>
        <el-form-item label="分配角色" :label-width="formLabelWidth">
          <el-select placeholder="请选择" v-model="value">
            <el-option
              :label="item.roleName"
              v-for="item in rolesList"
              :key="item.id"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <!-- 添加/修改模态框表单 -->
      <el-form
        :model="usersForm"
        :rules="userFormRules"
        ref="usersFormRef"
        v-else
      >
        <el-form-item
          label="用户名"
          :label-width="formLabelWidth"
          prop="username"
        >
          <el-input
            v-model="usersForm.username"
            autocomplete="off"
            :disabled="dialog.option == 'edit'"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="密码"
          v-if="dialog.option == 'add'"
          :label-width="formLabelWidth"
          prop="password"
        >
          <el-input
            type="password"
            v-model="usersForm.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
          <el-input v-model="usersForm.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth" prop="mobile">
          <el-input v-model="usersForm.mobile" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog.show = false">取 消</el-button>
        <el-button type="primary" @click="addUser('usersFormRef')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 引入api中封装好的接口
import { add_user, edit_user, setRoles } from "../http/api";
export default {
  name: "UsersDialog",
  data() {
    return {
      value: "",
      id: "",
      // 表单头宽
      formLabelWidth: "70px",
      // 表单校验规则
      userFormRules: {
        username: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "用户名请保持在3到10个字符之间",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          {
            min: 6,
            max: 10,
            message: "密码请保持在6到10个字符之间",
            trigger: "blur",
          },
        ],
        email: [
          {
            required: true,
            type: "email",
            message: "邮箱格式不正确",
            trigger: "blur",
          },
        ],
        mobile: [
          { required: true, message: "手机号不能为空", trigger: "blur" },
        ],
      },
    };
  },
  props: {
    dialog: {
      type: Object,
    },
    usersForm: {
      type: Object,
    },
    rolesList: {
      type: Array,
    },
    userInfo: {
      type: Object,
    },
  },
  components: {},

  computed: {},

  mounted() {},

  methods: {
    // 点击提交按钮执行的方法
    addUser(formName) {
      // 对表单进行校验
      this.$refs[formName].validate((valid) => {
        // 符合条件执行操作
        if (valid) {
          // 执行添加用户
          if (this.dialog.option == "add") {
            add_user(this.usersForm).then((res) => {
              console.log(res);
              if (res.data.meta.status != 201) {
                this.$message.error(res.data.meta.msg);
                return;
              }
              this.$message.success(res.data.meta.msg);
              this.dialog.show = false;
              this.$emit("upDateUsers");
            });
            // 执行编辑用户
          } else if (this.dialog.option == "edit") {
            edit_user(this.usersForm).then((res) => {
              console.log(res);
              if (res.data.meta.status != 200) {
                this.$message.error(res.data.meta.msg);
                return;
              }
              this.$message.success(res.data.meta.msg);
              this.dialog.show = false;
              this.$emit("upDateUsers");
            });
            // 执行分配角色
          } else if (this.dialog.option == "set_role") {
            console.log(this.value);
            setRoles({ id: this.userInfo.id, rid: this.value }).then((res) => {
              console.log(res);
              this.$message.success(res.data.meta.msg);
              this.dialog.show = false;
              this.$emit("upDateUsers");
            });
            // 校验未通过提示信息
          } else {
            console.log("error submit!!");
            return false;
          }
        }
      });
    },
  },
  watch: {},
  mixins: [],
};
</script>
<style  scoped>
</style>